<template>
  <div id="dispatchCenter" class="d-flex pt-3 px-2" style="align-items: center;">
    <CircularValueList :items="dispatchCenterData" @item-click="handleItemClick" />
    <div class="duty-phone-container">
      <div class="phone-number">15751875114</div>
      <div class="phone-label">总值班</div>
    </div>
  </div>
</template>
<script>

import CircularValueList from "_c/table/CircularValueList.vue";

export default {
  components: {CircularValueList},
  data() {
    return {
      dispatchCenterData: [
        { label: '总席位', value: '31个', color: '#00baff' },
        { label: '值班席位', value: '12个', color: '#ff9900' },
        { label: '调度员总数', value: '60人', color: '#00e676' },
        { label: '值班调度员总数', value: '11人', color: '#ff4d4d' }
      ]
    }
  },
  methods: {
    handleItemClick(item) {
      console.log('点击了：', item);
      if (item.label === '调度员总数') {
        this.$store.dispatch('popup/openPopup', { componentName: 'DispatcherStats' });
      } else if (item.label === '值班调度员总数') {
        this.$store.dispatch('popup/openPopup', { componentName: 'DutyDispatcherStats' });
      }
    }
  }
}
</script>
<style lang="scss" scoped>

#dispatchCenter{
  .duty-phone-container {
    text-align: center;
    margin-left: 10px;
    flex-shrink: 0;
  }

  .phone-number {
    font-size: 14px;
    font-weight: bold;
    color: #00baff;
    white-space: nowrap;
  }

  .phone-label {
    font-size: 14px;
    color: #c3cbde;
    margin-top: 3px;
  }
}

</style>
